<template>
	<el-affix :offset="0">
		<div class="container">
			<el-row>
				<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
					<img src="/public/img/logo.png" alt="同游网" @click="gohome">
					<el-menu-item index="1">
						<router-link to="/" style='display: block; height: 100%;'>首页</router-link>
					</el-menu-item>
					<el-menu-item index="2" >
						<router-link to="/news" style='display: block; height: 100%;width: 100%;'>资讯公告</router-link>
					</el-menu-item>
					<el-menu-item index="3" @click="gostrategy">攻略查询</el-menu-item>
				</el-menu>
				<div class="flex-grow" />
				<el-dropdown v-if="headingshow">
					<el-button type="primary">
						<img src="../../public/img/wei.png" alt="头像">
						<el-icon class="el-icon--right">
							<arrow-down />
						</el-icon>
					</el-button>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item>个人中心</el-dropdown-item>
							<el-dropdown-item>退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
				<el-dropdown v-if="loginshow=!headingshow" class="loginshow">
					<router-link to="/login">登录|注册</router-link>
				</el-dropdown>
			</el-row>
		</div>
	</el-affix>
	<div class="topbox"></div>
	<!-- 内容部分 -->
	<router-view></router-view>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
const router = useRouter();
const headingshow=ref(false)
const gotologin = () => {
	router.replace({ path: '/login' })
}

const gohome = () => {
	console.log('跳转');
	router.replace({ path: '/' })
}
const gostrategy = () => {
	router.replace({ path: '/strategy' })
}

</script>
<style lang="scss" scoped>
.topbox {
	height: 80px;
}

.el-affix {
	width: 100%;
	.container {
		height: 80px;
		width: 100%;
		display: flex;
		justify-content: center;
		background: #fff;

		.el-row {
			width: 100%;
			min-width: 950px;
			max-width: 1200px;
			background: #fff;

			.el-menu {
				color: #000;
				.el-menu-item {

					a{
						text-decoration:none
					}
				}
			}

			.flex-grow {
				flex-grow: 1;
			}
			.loginshow{
				color: #000;
				height: 80px;
				a{
					line-height: 80px;
					text-decoration:none;
					font-size:18px;
				}
			}
			.el-dropdown {
				width: 150px;

				.el-button {
					margin-top: 20px;
					height: 40px;
					width: 40px;
					border-radius: 50%;

					img {
						height: 40px;
						width: 40px;
						border-radius: 50%;
						border: 1px solid #000;
						margin-left: 16px;

					}
				}
			}

			.el-menu {
				width: 800px;
				padding: 10px 30px;

				img {
					width: 200px;
					height: 50px;
				}
			}
		}
	}
}
</style>